
<script lang="ts" setup name="App">
    import { ref, customRef } from 'vue';
    import useMsgRef from './useMsgRef';

    // 使用vue提供的默认ref来定义响应式数据，当数据发生变化时，数据更新，页面也更新
    // let msg = ref('你好');

    // 需求：当用户输入6后，等待1s后再更新数据
    let timer: number;
    let initValue = '你好';
    let msg = customRef((track, trigger) => {
        // track和trigger是底层传入的
        return {
            // 当数据被读取时，get()被调用
            get() {
                // get()函数的起始位置需要调用track()函数
                // track()函数告诉Vue数据msg很重要，需要对msg持续关注，一旦msg变化就要去更新
                track();
                /* 虽然Vue没有明确规定track()函数必须在get()的最开始处调用，但从最佳实践和可读性的角度来看，通常建议将
                   track()调用放在get()的最开始处。 */
                return initValue;
            },
            // 当数据被修改时，get()被调用
            set(newValue) {
                initValue = newValue;

                // 在set()函数中改完数据后，还需要调用trigger()函数
                // trigger()函数通知Vue数据msg发生变化了
                // trigger();

                // 实现需求
                clearTimeout(timer);
                timer = setTimeout(() => {
                    trigger();
                }, 1000);
            }
        };
    });

    /* customRef一般和Hooks配合使用 */
    let { msg: msg2 } = useMsgRef('hahaha', 2000);
</script>

<template>
    <div class="app">
        <h2>{{ msg }}</h2>
        <input type="text" v-model="msg"/>
        <h2>{{ msg2 }}</h2>
        <input type="text" v-model="msg2"/>
    </div>
</template>

<style scoped>
    .app {
        background-color: skyblue;
        border-radius: 10px;
        box-shadow: 0 0 10px;
        padding: 10px;
    }
</style>